<!--作者：薛嘉颖
描述：项目小组
修改人：薛嘉颖  -->
<template>
<div id="projectTeam">
  <!-- 搜索框 -->
  <div class="demo-input-size">
    <el-input
      v-model="input1"
      class="w-50 m-2"
      placeholder="Search"
      :suffix-icon="Search"
    />
  </div>
  <!-- 线 -->
    <div id="line">
       <hr class="langHr">
    <hr class="shortHr">
    </div>
    <div class="nav">
    <div class="nav2">实训小组成员<span></span> <span></span>   <hr class="leftline" ><hr class="rightline"></div>
    </div>

   <!-- 表单 -->
    <el-table
      :data="tableData"
      style=" margin-left:60px;width:1200px; height: 380px;border:1px solid #c2dae2"
      :row-class-name="tableRowClassName"
      :header-cell-style="{ background: '#c2dae2' }"
    >
      <el-table-column prop="date" label="序号" width="100" />
      <el-table-column prop="name" label="项目名称" width="150" />
      <el-table-column prop="teamName" label="小组名称" width="200" />
      <el-table-column prop="groupMembers" label="小组成员" width="100" />
      <el-table-column prop="projectRole" label="项目角色" width="100" />
      <el-table-column prop="headman" label="组长" width="100" />
      <el-table-column prop="standardHours" label="标准学时" width="100" />
      <el-table-column prop="largeClassHours" label="大课学时" width="100" />
      <el-table-column prop="selfStudyHours" label="自习学时" width="100" />
      <el-table-column prop="tel" label="联系电话" width="150" />
      
    </el-table>

 <!-- 分页 -->
     <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination
      v-model:currentPage="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</div>
</template>

<script lang='js'>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
 import { reactive } from "@vue/reactivity";
export default {
  name: "projectTeam",
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "defaul-row";
      } else {
        return "success-row";
      }
    },
  },
  setup() {
    const input1 = ref('');
const currentPage3 = ref(5);
const pageSize3 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val) => {
  console.log('${val} items per page')
}
const handleCurrentChange = (val) => {
  console.log('current page: ${val}')
}
    const tableData = [
      {
        date: "1",
        name: "考勤管理系统",
        teamName: "JAVA软件开发实训组1",
        groupMembers: "宋宋",
        projectRole: "前端",
        headman:'',
        standardHours:'50',
        largeClassHours:'20',
        selfStudyHours:'0',
        tel:'15686862331'
      },
        {
        date: "2",
        name: "考勤管理系统",
        teamName: "JAVA软件开发实训组1",
        groupMembers: "宋宋",
        projectRole: "前端",
        headman:'',
        standardHours:'50',
        largeClassHours:'20',
        selfStudyHours:'0',
        tel:'15686862331'
      },
     {
        date: "3",
        name: "考勤管理系统",
        teamName: "JAVA软件开发实训组1",
        groupMembers: "宋宋",
        projectRole: "前端",
        headman:'',
        standardHours:'50',
        largeClassHours:'20',
        selfStudyHours:'0',
        tel:'15686862331'
      },
     {
        date: "4",
        name: "考勤管理系统",
        teamName: "JAVA软件开发实训组1",
        groupMembers: "宋宋",
        projectRole: "前端",
        headman:'',
        standardHours:'50',
        largeClassHours:'20',
        selfStudyHours:'0',
        tel:'15686862331'
      },
   {
        date: "5",
        name: "考勤管理系统",
        teamName: "JAVA软件开发实训组1",
        groupMembers: "宋宋",
        projectRole: "前端",
        headman:'',
        standardHours:'50',
        largeClassHours:'20',
        selfStudyHours:'0',
        tel:'15686862331'
      },
   {
        date: "6",
        name: "考勤管理系统",
        teamName: "JAVA软件开发实训组1",
        groupMembers: "宋宋",
        projectRole: "前端",
        headman:'',
        standardHours:'50',
        largeClassHours:'20',
        selfStudyHours:'0',
        tel:'15686862331'
      },
      {
        date: "7",
        name: "考勤管理系统",
        teamName: "JAVA软件开发实训组1",
        groupMembers: "宋宋",
        projectRole: "前端",
        headman:'',
        standardHours:'50',
        largeClassHours:'20',
        selfStudyHours:'0',
        tel:'15686862331'
      },
      
        
    ];

    return {
      tableData,
    };
  },
};
</script>






<style lang='less' scoped>
 /deep/ .demo-input-size{
  //  搜索框
   .el-input__inner{
      width: 200px;
      background-color:  rgb(194, 218, 226); 
      border: 1px solid rgb(112, 110, 110);
      border-radius: 80px;
      margin-top: 30px;
       margin-bottom: 10px;
      margin-left: 60px;
  }
}
#line{
  margin-top: -70px;
  margin-bottom: 70px;
.langHr{
          margin:10px 60px;
          border: 1px solid rgb(194,218,226);
          margin-top: 90px;
          background-color:rgb(194,218,226) ;
      }
.shortHr{
          margin-left:60px;
          width:200px;
          border:4px solid rgb(62,148,173);
          margin-top:-15px;
          margin-bottom: 40px;
          border-radius: 20px;
          background-color:rgb(62,148,173) ;
      }
}
.nav{
  // 上面的小方框
    margin-left: 100px;
    margin-top: 20px;
    .nav1,.nav2{
        position: relative;
        width: 100px;
        height: 40px;
        border: 1px #999 solid;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        span{
            position: absolute;
            width: 4px;
            height: 4px;
            border: 1px #999 solid;
            border-radius: 50%;
            top:3px;
            background-color: white;
        }
        span:nth-child(1){
            left: 20px;
        }
        
    }
    .nav1{
        background-color: white;
        margin-bottom: 10px;
        color: black;
        hr{
            width: 28px;
            transform:rotate(90deg);
            position: absolute;
            top: -7px;
             background-color: #999;

        }
        .leftline{
            left: 8px;
            border: 1px solid #999;
        }
        .rightline{
            left: 66px;
            border: 1px solid #999;
        }
    }
    .nav2{
        background-color: #3e94ad;
        color: white;
        margin-bottom: -30px;
        top: -60px;
        hr{
            width: 17px;
            transform:rotate(90deg);
            position: absolute;
            top: -3px;
             background-color: #999;
        }
         .leftline{
            left: 13px;
            border: 1px solid #999;
        }
        .rightline{
            left: 86px;
            border: 1px solid #999;
        }
    }
}


.success-row {
  background-color: #c2dae2 !important;
}
.demo-pagination-block{
   padding: 20px 420px;
    .demo-pagination-block + .demo-pagination-block {
      margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
      margin-bottom: 30px;
      margin-left: 60px;

    }
}





</style>
